<template>
  <div class="item">
    <div class="info">
      <div class="name">收货人:{{ real_name }}&nbsp;&nbsp;{{ phone }}</div>
      <div class="address">收货地址:{{ address }}</div>
    </div>
    <div class="set">
      <div class="left" @click="clickSetDefault">
        <i :class="is_default == 1 ? 'active' : ''"></i>设置默认
      </div>
      <div class="right">
        <div class="edit" @click="clickEdit"><van-icon name="records" />编辑</div>
        <div class="delete" @click="deleteAddress"><van-icon name="delete-o" />删除</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    address() {
      return this.province + this.city + this.district + this.detail;
    },
  },
  props: {
    id: {
      type: Number,
    },
    is_default: {
      type: Number,
    },
    phone: {
      type: String,
    },
    province: {
      type: String,
    },
    city: {
      type: String,
    },
    detail: {
      type: String,
    },
    district: {
      type: String,
    },
    real_name: {
      type: String,
    },
    
  },
  created(){

  },
  methods: {
    setDefault() {
      let token = localStorage.getItem("token");
      let url = "/api/address/default/set";

      let pro = axios({
        url: url,
        method: "post",
        headers: {
          "Authori-zation": "Bearer " + token,
        },
        data: {
          id:this.id
        },
      })
        .then((res) => {
          // this.id = res.data.data.id;
          // console.log(res.data);
        })
        .catch((err) => {
          console.log("失败");
        });
    },

    clickSetDefault(){
      if(this.is_default==1){
        let  d = 0
        this.$emit('set-default',{id:this.id,is_default:d}) 
      }else{
        let d = 1
        this.$emit('set-default',{id:this.id,is_default:d}) 
      }

      this.setDefault()
    },

    deleteAddress(){
        let token = localStorage.getItem("token");
      let url = "/api/address/del";

      let pro = axios({
        url: url,
        method: "post",
        headers: {
          "Authori-zation": "Bearer " + token,
        },
        data: {
          id:this.id
        },
      })
        .then((res) => {
          this.$toast.show("删除成功!",2000)
          this.$emit('delete-item',this.id)
        })
        .catch((err) => {
          console.log("失败");
        });
    },
     clickEdit() {
       this.$router.push('/user/add_address/'+this.id)

     },
  },
 
};
</script>

<style lang="scss" scoped>
.item {
  padding: 12px 15px;
  background-color: #fff;
  .info {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    .name {
      color: #282828;
      font-size: 14px;
      margin-bottom: 3px;
      font-weight: 700;
    }
    .address {
      color: #282828;
      font-size: 14px;
      margin-bottom: 5px;
    }
  }
  .set {
    margin-top: 12px;
    color: #282828;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      i {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #ccc;
        margin-right: 8px;
      }

      i.active {
        display: inline-block;

        background: url(../../../assets/icon/common/cart_yes.png) no-repeat;
        background-size: 55% 55%;
        background-position: center center;
        border-radius: 50%;
        background-color: #e93323;
        border-color: #e93323;
      }
    }
    .right {
      //   background-color: red;
      i {
        margin-right: 2px;
      }
      display: flex;
      .edit {
        margin-right: 10px;
      }
      .delete {
      }
    }
  }
}
</style>



